<template>
  <div id="app">
    <!-- 头部区域 -->
    <header>
      <span @click="goBack" v-show="isShow">返回</span>
      黑马商城</header>
    <!-- content内容区域 -->
    <router-view></router-view>
    <!-- tabbar区域 -->
    <!-- 1.把下载的font引入到assets中
    2.使用具名插槽给tabbar-item设置自定义的图片
    3.把字体图标的css文件引入到main.js中 
    4.设置 对应的字体图片类样式 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/home">
        <span>首页</span>
        <i slot="icon" class="iconfont icon-index-fill"></i>
      </van-tabbar-item>
      <van-tabbar-item to="/member">
        <span>会员</span>
        <i slot="icon" class="iconfont icon-icon_zhanghao"></i>
      </van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data(){
    return {
      active:0
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  },
  computed:{
    isShow:function(){
      if(this.$route.path=="/home"){
        return false
      }else{
        return true
      }
    }
  }
};
</script>

<style lang="less" scoped>
header {
  background-color: #1989fa;
  line-height: 40px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 14px;
  position: relative;
  span{
    position: absolute;
    left: 15px;
  }
}
</style>